// A checkbox that behaves like a switch
.checkbox-switch {
    width: 36px;
    height: 22px;

    position: relative;
    input, label {
        display: none;
    }

    cursor: hand;
    padding: 10px;

    &:before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        display: block;
        background-color: darken(#fff, 10%);
        width: 100%;
        height: 22px;
        border-radius: 12px;
        /* box-shadow: 0 0 0 2px darken(#fff, 10%); */
        /* border: 2px solid darken(#fff, 10%); */
        .lh-transition(all 200ms);
    }

    &:after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-color: #fff;
        position: absolute;
        left: 2px;
        top: 2px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        .lh-transition(all 200ms);
    }

    &:active:after {
        background-color: darken(#fff, 10%);
    }

    &:checked:before {
        background-color: @brand-success;
        /* box-shadow: 0 0 0 2px green; */
        .lh-transition(all 200ms);

    }

    &:checked:after {
        left: 16px;
    }

    &:disabled {
        opacity: 0.6;
    }

}

// A React switch component
.rui.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
  margin-bottom: 0;

  input, label {
    display: none;
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.rui.switch .switch-control {
  position: relative;
  width: 36px;
  max-width: 36px;
  height: 22px;
  flex: 0 0 auto;

  // Bar
  &:before {
    position: absolute;
    left: 0;
    top: 6px;
    content: "";
    display: block;
    background-color: darken(#fff, 10%);
    width: 100%;
    height: 10px;
    border-radius: 12px;
    /* box-shadow: 0 0 0 2px darken(#fff, 10%); */
    /* border: 2px solid darken(#fff, 10%); */
    .lh-transition(all 200ms);
  }

  // Nub
  &:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: @gray-light;
    position: absolute;
    left: 0;
    top: 2px;
    border-radius: 10px;
    // box-shadow: 0 0 10px rgba(0,0,0,.1);
    .lh-transition(all 200ms);
  }

  // Bar
  &.active:before {
    background-color: lighten(@brand-success, 20%);
    .lh-transition(all 200ms);
  }

  // Nub
  &.active:after {
    left: 18px;
    background-color: @brand-success;
  }

  &:disabled {
    opacity: 0.6;
  }
}

.rui.switch .control-label {
  margin-left: 10px;
}

.rui.list-item-action .rui.switch {
  padding: 0;
}

// Original style is inherited from Bootstrap
.rui.switch .help-block {
  color: @black30;
}

.checkbox-large {
  -webkit-appearance: none;
  // background-color: #fafafa;
  // border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 9px;
  // border-radius: 3px;
  display: inline-block;
  position: relative;
  width: 20px;
	height: 20px;
	border-radius: 2px;
	border: solid 2px #5e6264;

  &:checked {
    font-size: 13px;

    &:after {
      font-family: FontAwesome;
      content: "\f00c";
      position: absolute;
      top: 2px;
      left: 2px;
      color: #5e6264;
    }
  }
}

.rui.number-input {
  display: flex;

  .number-input-field {
    width: 36px;
    height: 40px;
    margin-right: 5px;
    text-align: center;
    background-color: #f7f7f7;
    border: solid 1px #cccccc;
    flex: 0 0 auto;
    padding: 0;
  }

  .edited {
    background-color: @rui-info-bg;
    border: 1px solid @rui-info;
  }
  .number-input-field:focus {
    background-color: @rui-info-bg;
  }
  .number-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .stacked-buttons {
    width: 25px;
    flex: none;

    .button {
      border: 1px solid @rui-default;
      border-radius: 2px;
      margin-bottom: -18px;
      width: 20px;
      align-items: center;
      height: 19px;
      display: flex;
      justify-content: center;
      padding: 0px;

      i {
        font-size: 8px;
        color: #5e6264;
      }
    }
  }
}

.rollover-checkbox {

  .selected-checkbox {
    padding-left: 10px;
    -webkit-flex: 1;
    flex: 0;
    border: 1px
  }

  .second-child {
    display: none;
    padding-left: 10px;
    -webkit-flex: 1;
    flex: 1;
    border: 1px
  }

  &:hover .first-child {
    display: none;
  }

  &:hover .second-child {
    display: inline-block;
  }
}

input.highlight, textarea.highlight {
  animation-name: 'highlightInput';
  animation-duration: 300ms;
}

@keyframes highlightInput {
  0% {
    background-color: auto;
  }
  30% {
    background-color: #e2f2e2;
  }
  70% {
    background-color: #e2f2e2;
  }
  100% {
    background-color: auto;
  }
}

input.highlight-variant, textarea.highlight-variant {
  animation-name: 'highlightVariantInput';
  animation-duration: 300ms;
}

@keyframes highlightVariantInput {
  0% {
    background-color: auto;
  }
  30% {
    background-color: #f0fff4;
  }
  70% {
    background-color: #f0fff4;
  }
  100% {
    background-color: auto;
  }
}
